﻿@page "/selectbar"

<RadzenExample Name="SelectBar">
<div class="row">
    <div class="col-xl-6">
        <h3>SelectBar with single selection</h3>
        <RadzenSelectBar @bind-Value=@singleValue TValue="bool" Change=@(args => OnChange(args, "SelectBar with single selection"))>
            <Items>
                <RadzenSelectBarItem Text="On" Value="true" />
                <RadzenSelectBarItem Text="Off" Value="false" />
            </Items>
        </RadzenSelectBar>
        <h3 style="margin-top: 2rem">SelectBar with multiple selection</h3>
        <RadzenSelectBar @bind-Value=@values TValue="IEnumerable<int>" Multiple="true" Change=@(args => OnChange(args, "SelectBar with multiple selection"))>
            <Items>
                <RadzenSelectBarItem Text="Orders" Value="1" />
                <RadzenSelectBarItem Text="Employees" Value="2" />
                <RadzenSelectBarItem Text="Customers" Value="3" />
            </Items>
        </RadzenSelectBar>
        <h3 style="margin-top: 2rem">SelectBar with items from data</h3>
        <RadzenSelectBar @bind-Value=@values TValue="IEnumerable<int>" Multiple="true" Change=@(args => OnChange(args, "SelectBar with items from data"))
                            Data="@data" TextProperty="Name" ValueProperty="Id" />
        <h3 style="margin-top: 2rem">SelectBar with declared items and items from data</h3>
        <RadzenSelectBar @bind-Value=@values Data="@data" TextProperty="Name" ValueProperty="Id" TValue="IEnumerable<int>" Multiple="true" Change=@(args => OnChange(args, "SelectBar with declared items and items from data"))>
            <Items>
                <RadzenSelectBarItem Text="Static item" Value="0" />
            </Items>
        </RadzenSelectBar>
        <h3 style="margin-top: 2rem">Disabled SelectBar with multiple selection</h3>
        <RadzenSelectBar Disabled="true" @bind-Value=@values TValue="IEnumerable<int>" Multiple="true">
            <Items>
                <RadzenSelectBarItem Text="Orders" Value="1" />
                <RadzenSelectBarItem Text="Employees" Value="2" />
                <RadzenSelectBarItem Text="Customers" Value="3" />
            </Items>
        </RadzenSelectBar>
    </div>
    <div class="col-xl-6">
        <EventConsole @ref=@console />
    </div>
</div>
</RadzenExample>

@code {
    public class MyObject
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    IEnumerable<MyObject> data = new MyObject[] {
        new MyObject(){ Id = 1 , Name = "Orders"}, new MyObject() { Id = 2 , Name = "Employees"}, new MyObject() { Id = 3 , Name = "Customers" } };

    bool singleValue = false;
    IEnumerable<int> values = new int[] { 1, 2 };
    EventConsole console;

    void OnChange(object value, string name)
    {
        var str = value is IEnumerable<int> ? string.Join(", ", (IEnumerable<int>)value) : value;
        console.Log($"{name} value changed to {str}");
    }
}